<template>
  <div>
       <el-form ref="form" :model="user" label-width="80px" :rules="formRules">
           <el-form-item label="用户名" prop="username">
               <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
           </el-form-item>   

           <el-form-item label="密码" prop="password">
               <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
           </el-form-item>

            <el-form-item align="left" >
                <el-button type="primary" @click="handleSubmit">登入</el-button>
           </el-form-item> 
       </el-form>
  </div>
</template>

<script>
export default {
    methods:{
        handleSubmit(){
            //发起登入请求前，再次进行表单校验
            // 先获取表单对象，然后执行校验方法
            this.$refs["form"].validate((valid)=>{
                // valid 校验结果 true 校验通过 false校验不通过
                if(valid){
                    // 校验通过 ，valid打印的值是true
                    console.log(valid);
                    alert("校验通过，可以发起请求")
                }else{
                    alert("校验失败，不可以发起请求")
                }
            })
        }
    },
    data(){
        return{
            user:{
                username:"",
                password:""
            },
            formRules:{
                username:[
                    {required:true,message:"用户名不能为空", trigger:"blur"},
                    {min:3,max:5,message:"用户名长度在3～5个字符",trigger:"blur"}
                ],
                password:[
                    {required:true,message:"密码不能为空",trigger:"blur"}
                ]
            }

        }
    }

}
</script>

<style>

</style>